<template>
    <div>
        <NavTopBar title="我的订单" fixed placeholder :back="'/user'" />
        <div class="tabar-box">
            <van-tabs
                class="tabar"
                :title-active-color="'#1baeae'"
                :color="'#1baeae'"
                v-model:active="status"
            >
                <van-tab title="全部" name=""></van-tab>
                <van-tab title="待付款" name="0"></van-tab>
                <van-tab title="待确认" name="1"></van-tab>
                <van-tab title="待发货" name="2"></van-tab>
                <van-tab title="已发货" name="3"></van-tab>
                <van-tab title="交易完成" name="4"></van-tab>
            </van-tabs>
        </div>

        <div class="content">
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                <van-list
                    class="order"
                    v-model:loading="loading"
                    finished-text="没有更多了"
                    :finished="finished"
                    :offset="100"
                    @load="loadData"
                >
                    <div
                        v-for="(item, index) in list"
                        :key="index"
                        class="order_item"
                        @click="goDetail(item.orderNo)"
                    >
                        <div class="order_item_header">
                            <span>订单时间：{{ item.createTime }}</span>
                            <span class="fr">{{ item.orderStatusString }}</span>
                        </div>
                        <van-card
                            v-for="v in item.newBeeMallOrderItemVOS"
                            :key="v.orderId"
                            :num="v.goodsCount"
                            :price="v.sellingPrice"
                            desc="全场包邮"
                            :title="v.goodsName"
                            :thumb="$filters.prefix(v.goodsCoverImg)"
                        />
                    </div>
                </van-list>
            </van-pull-refresh>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs, watch } from "vue";
import NavTopBar from "@/components/NavTopbar.vue";
import tabsHook from "./hook/tabs";
import { getOrderList } from "@/apis/goods";
import router from "@/router";
export default defineComponent({
    components: { NavTopBar },
    setup() {
        const state: any = reactive({
            loading: false,
            finished: false,
            refreshing: false,
            list: [],
            page: 1,
        });
        const { status } = tabsHook();

        // 获取列表数据
        const loadData = async () => {
            const { data } = await getOrderList({
                pageNumber: state.page,
                status: status.value,
            });
            state.page += 1;
            // 如果时刷新
            if (state.refreshing) {
                state.list = data.list;
            } else {
                state.list = state.list.concat(data.list);
            }
            state.loading = false;
            state.refreshing = false;
            if (data.list.length < data.pageSize) state.finished = true;
        };

        // 下拉刷新
        const onRefresh = () => {
            state.refreshing = true;
            state.finished = false;
            state.page = 1;
            loadData();
        };

        // 监听tabs切换
        watch(status, (newVal) => {
            console.log(newVal);
            onRefresh();
        });

        const goDetail = (id: number) => {
            router.push({ path: "/order-detail", query: { id } });
        };

        return {
            status,
            loadData,
            ...toRefs(state),
            onRefresh,
            goDetail,
        };
    },
});
</script>

<style lang="scss" scoped>
.tabar-box {
    height: 50px;
    .tabar {
        position: fixed;
        left: 0;
        width: 100%;
        height: 50px;
        z-index: 1000;
    }
}
.content {
    height: calc(100vh - 100px);
    overflow: auto;
}
.order {
    padding: 0px 10px;
    &_item {
        margin: 20px 0;
    }
}
</style>
